<template>
	<view class="page">
		<view class="cover">
			<image :src="cover.img" mode="aspectFill"></image>
			<view class="cover-mask" @click="selectCover">
				<image src="@/static/theme/default/home/xj.png"></image>
				<view class="cover-mask-text">更改封面</view>
			</view>
		</view>
		<view class="title">
			<input type="text" placeholder="请输入表单标题" v-model="title" maxlength="50">
		</view>
		<view class="des">
			<textarea type="text" placeholder="请输入表单描述" v-model="des" maxlength="100"></textarea>
		</view>
		<u-gap height="20" bgColor="#efefef"></u-gap>
		<view class="form" v-if="type == 1">
			<active-form v-model="formData" :isEdit="false" num @tapMask="tapMask"></active-form>
			<view class="add">
				<view class="add-btn" @click="add">
					<view class="add-btn__icon">+</view>
					<view class="add-btn__text">添加</view>
				</view>
			</view>
			
			<view class="menu" v-show="menuVisible">
				<view class="menu__item" v-for="(item,index) in menu" :key="index" @click="change(item,index)">
					<view class="menu__item--icon" :style="{backgroundColor: item.bgColor}">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="menu__item--text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="type == 2">
			<sortable-renderjs domId="horizontal" @changeList="horizontalListChange" :options="options">
				<view class="list horizontal" id="horizontal">
					<view class="list__item" v-for="(item,index) in formData" :key="item.id" :data-id="item.id" @longtap="longpressModule">
						<view class="list__item--icon" @click="delFormItem(index)">
							<image src="@/static/theme/default/home/henggang.png" mode=""></image>
						</view>
						<view class="list__item--title">{{index+1}}.{{item.label}}</view>
						<view class="list__item--sort">
							<image src="@/static/theme/default/community/list.png" mode=""></image>
						</view>
					</view>
				</view>
			</sortable-renderjs>
			
			<view class="edit-btn">
				<u-button type="primary" color="#2979ff" text="确定" @click="confirm"></u-button>
			</view>
		</view>
		
		<u-popup mode="bottom" round="10" :show="addVisible" @close="addVisible = false" @open="addVisible = true">
			<view class="add-pop">
				<view class="add-pop__head">
					<view class="add-pop__head--icon" @click="addVisible = false">
						<u-icon name="arrow-down" size="22"></u-icon>
					</view>
					<view class="add-pop__head--title">添加</view>
					<view class="add-pop__head--right"></view>
				</view>
				<view class="add-pop__content">
					<view class="add-pop__content--list" hover-class="clickable" v-for="(item,index) in addList" :key="index" @click="addForm(item,index)">
						<view class="add-pop__content--list__icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="add-pop__content--list__right">
							<view class="add-pop__content--list__right--title">{{item.title}}</view>
							<view class="add-pop__content--list__right--des">{{item.des}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" round="10" :show="manageVisible" @close="manageVisible = false" @open="manageVisible = true">
			<view class="manage-pop">
				<view class="manage-pop__content">
					<view class="manage-pop__content--list" @click="delModel">
						<view class="manage-pop__content--list-icon center">
							<image src="@/static/theme/default/home/comment/shanchu.png" mode=""></image>
						</view>
						<view class="manage-pop__content--list-text">删除</view>
					</view>
				</view>
				<view class="manage-pop__cancel" @click="manageVisible = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import ActiveForm from "@/components/active-form/active-form";
	import sortableRenderjs from '@/uni_modules/cms-sortable-renderjs/cms-sortable-renderjs';
	import {uploadImages} from '@/common/custom_util.js';
	
	export default {
		 components: {
			ActiveForm,
			sortableRenderjs
		},
		data() {
			return {
				static_img: _data.data('static_img'),
				pxid: _data.localData('userid'),
				data: {},
				cover: {
					img: 'http://221.226.178.122:1884/homepage/AppImage/smartform/cover.png',
					path: '/homepage/AppImage/smartform/cover.png'
				},
				title: '',
				des: '',
				type: 1,//1：编辑，2：排序
				formData: [
					// {
					// 	id: "kjjnsasd",
					// 	placeholder: "输入名字",
					// 	label: "姓名",
					// 	type: "textarea",
					// 	required: true,
					// },
					// {
					// 	id: "kjjnsasazsasd",
					// 	placeholder: "输入",
					// 	label: "数字",
					// 	type: "number",
					// 	required: false,
					// },
					// {
					// 	id: "sadasgh",
					// 	label: "年龄",
					// 	type: "radio",
					// 	value: 2,
					// 	required: true,
					// 	list: [
					// 		{
					// 			value: 1,
					// 			label: "15岁以下",
					// 		},
					// 		{
					// 			value: 2,
					// 			label: "16~20岁",
					// 		},
					// 		{
					// 			value: 6,
					// 			label: "20岁以上",
					// 		},
					// 	],
					// },
					// {
					// 	id: "oodsndf",
					// 	label: "兴趣",
					// 	type: "checkbox",
					// 	value: [],
					// 	required: true,
					// 	list: [
					// 		{
					// 			value: 1,
					// 			name: "足球",
					// 		},
					// 		{
					// 			value: 2,
					// 			name: "羽毛球",
					// 		},
					// 		{
					// 			value: 3,
					// 			name: "唱歌",
					// 		}
					// 	],
					// },
					// {
					// 	id: "asdfdfgd",
					// 	label: "头像 ",
					// 	type: "file",
					// 	accept: 'image',
					// 	capture: ['album', 'camera'],
					// 	maxCount: 2, 
					// 	sizeType: ['original', 'compressed'],
					// 	multiple: true, 
					// 	previewImage: true,
					// 	fileList: [],
					// },
				],
				menu: [
					{
						text: '添加',
						icon: require('@/static/theme/default/home/form/add.png'),
						bgColor: '#1677ff'
					},
					{
						text: '排序',
						icon: require('@/static/theme/default/home/form/sort.png'),
						bgColor: '#1677ff'
					},
					{
						text: '预览',
						icon: require('@/static/theme/default/home/form/view.png'),
						bgColor: '#1677ff'
					},
					{
						text: '下一步',
						icon: require('@/static/theme/default/home/form/next.png'),
						bgColor: '#52c41a'
					},
				],
				addList: [
					{
						title: '文本',
						des: '可输入文本内容',
						icon: require('@/static/theme/default/home/form/textarea.png')
					},
					{
						title: '单选',
						des: '在几个备选项中选择，只可选择一项',
						icon: require('@/static/theme/default/home/form/radio.png')
					},
					{
						title: '多选',
						des: '在几个备选项中选择，可选择多项',
						icon: require('@/static/theme/default/home/form/checkbox.png')
					},
					{
						title: '图片',
						des: '可上传图片和拍照',
						icon: require('@/static/theme/default/home/form/image.png')
					},
					{
						title: '数字',
						des: '可输入数字',
						icon: require('@/static/theme/default/home/form/number.png')
					},
					{
						title: '设备',
						des: '可选择设备',
						icon: require('@/static/theme/default/home/form/device.png')
					},
				],
				addVisible: false,
				options: {
					disabled: false,
					delay: 0
				},
				manageVisible: false,
				menuVisible: true,
			}
		},
		onLoad(options) {
			let data = {};
			uni.onKeyboardHeightChange(this.listener)
			try {
				options.data ? data = JSON.parse(options.data) : '';
				if(!Object.keys(data).length) return
				this.data = data;
				this.title = data.FormTitle;
				this.des = data.FormDesc;
				this.cover = {
					img: this.static_img + '/' + data.CoverImage,
					path: data.CoverImage
				};
				this.formData = data.FormJson;
			} catch {}
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.listener)
		},
		onNavigationBarButtonTap(e) {
			if(this.pxid == this.data.CreatePxid) {
				this.manageVisible = true
			} else {
				uni.showToast({
					title: "非创建人无法操作",
					icon: 'none'
				})
			}
		},
		methods: {
			listener(res) {
				this.menuVisible = res.height == 0;
			},
			/**
			 * 删除表单模板
			 * @param {Object} v
			 */
			flagDeleteSmartForm(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDeleteSmartForm',
					code: 2,
					apiparam: {
						formid: v
					},
					success(res) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},300)
					},
					fail() {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 拖动事件
			 * @param {Object} v 回调参数
			 */
			horizontalListChange(v) {
				let temp = [];
				for(let i=0;i<v.length;i++) {
					let flag = false;
					let obj = {}
					for(let j=0;j<this.formData.length;j++) {
						if(this.formData[j].id == v[i]) {
							flag = true;
							obj = this.formData[j]
						}
					}
					if(flag) temp.push(obj)
				}
				this.formData = temp;
			},
			/**
			 * 长按事件
			 */
			longpressModule() {
				uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
			},
			/**
			 * 底部菜单切换
			 * @param {Object} v
			 * @param {Object} i
			 */
			change(v,i) {
				switch(i) {
					case 0:
						this.addVisible = true;
						break;
					case 1:
						this.type = 2;
						break;
					case 2:
						let obj = {
							FormTitle: this.title,
							FormDesc: this.des,
							CoverImage: this.cover.path,
							FormJson: this.formData
						}
						uni.navigateTo({
							url: './view?type=1&data=' + JSON.stringify(obj),
							animationType: 'none'
						})
						break;
					case 3:
						if(!this.title.trim()) {
							uni.showToast({
								title: '标题不能为空',
								icon: 'none'
							})
							return
						}
						if(!this.formData.length) {
							uni.showToast({
								title: '表单不能为空',
								icon: 'none'
							})
							return
						}
						let data = {
							title: this.title,
							des: this.des,
							cover: this.cover,
							id: this.data.Id,
							typeName: this.data.TypeName
						}
						uni.navigateTo({
							url: './release?form=' + JSON.stringify(this.formData) + '&data=' + JSON.stringify(data)
						})
						break;
				}
			},
			add() {
				this.addVisible = true;
			},
			delFormItem(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(res) {
						if(res.confirm) {
							that.formData.splice(index,1);
						}
					}
				})
			},
			confirm() {
				this.type = 1;
			},
			/**
			 * 添加表单项
			 * @param {Object} v
			 */
			addForm(v,i) {
				let url = ''
				switch(i) {
					case 0:
						url = 'textarea';
						break;
					case 1:
						url = 'radio';
						break;
					case 2:
						url = 'checkbox';
						break;
					case 3:
						url = 'file';
						break;
					case 4:
						url = 'number';
						break;
					case 5:
						let flag = false;
						this.formData.forEach(item => {
							if(item.type === "device") flag = true;
						})
						if(!flag) {
							this.formData.push({
								id: Math.random(),
								type: 'device',
								deviceId: '',
								required: true
							})
						} else {
							uni.showToast({
								title: '只能添加一个设备',
								icon: 'none'
							})
						}
						break;
				}
				uni.navigateTo({
					url: './child/' + url
				})
				this.addVisible = false;
			},
			/**
			 * 获取文本表单数据
			 */
			getTextarea(v) {
				let flag = false;
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						flag = true;
						i = index
					}
				})
				if(flag) {
					this.$set(this.formData,i,v);
				} else {
					this.formData.push({
						...v,
						id: Math.random(),
						type: 'textarea'
					})
				}
			},
			/**
			 * 获取数字表单数据
			 */
			getNumber(v) {
				let flag = false;
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						flag = true;
						i = index
					}
				})
				if(flag) {
					this.$set(this.formData,i,v);
				} else {
					this.formData.push({
						...v,
						id: Math.random(),
						type: 'number'
					})
				}
			},
			/**
			 * 获取单选表单数据
			 */
			getRadio(v) {
				let flag = false;
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						flag = true;
						i = index
					}
				})
				if(flag) {
					this.$set(this.formData,i,v);
				} else {
					this.formData.push({
						...v,
						id: Math.random(),
						type: 'radio'
					})
				}
			},
			/**
			 * 获取多选表单数据
			 */
			getCheckbox(v) {
				let flag = false;
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						flag = true;
						i = index
					}
				})
				if(flag) {
					this.$set(this.formData,i,v);
				} else {
					this.formData.push({
						...v,
						id: Math.random(),
						type: 'checkbox'
					})
				}
			},
			/**
			 * 获取图片表单数据
			 */
			getFile(v) {
				let flag = false;
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						flag = true;
						i = index
					}
				})
				if(flag) {
					this.$set(this.formData,i,v);
				} else {
					this.formData.push({
						...v,
						id: Math.random(),
						type: 'file'
					})
				}
			},
			/**
			 * 移除表单项
			 * @param {Object} v
			 */
			remove(v) {
				let i = null;
				this.formData.forEach((item,index) => {
					if(item.id == v.id){
						i = index
					}
				})
				this.formData.splice(i,1);
			},
			/**
			 * 点击遮罩层
			 * @param {Object} v
			 */
			tapMask(v) {
				let url = v.type;
				uni.navigateTo({
					url: './child/' + url + '?data=' + JSON.stringify(v)
				})
			},
			/**
			 * 切换封面
			 */
			selectCover() {
				uploadImages({
					sizeType: 'compressed',
					fileName: 'topic',
					count: 1
				}, res => {
					this.cover = res[0];
				})
			},
			/**
			 * 删除模板
			 */
			delModel() {
				let that = this;
				this.manageVisible = false;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(res) {
						if(res.confirm) {
							that.flagDeleteSmartForm(that.data.Id);
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
	
	.page {
		background-color: #fff;
		min-height: 100vh;
	}
	
	.cover {
		height: 400rpx;
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
		}
		
		&-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
			background-color: rgba(0, 0, 0, .4);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
			}
			
			&-text {
				font-size: 27rpx;
				color: #fff;
			}
		}
	}
	
	.title {
		padding: 20rpx;
		height: 100rpx;
		
		input {
			font-size: 35rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
		}
	}
	
	.des {
		padding: 10rpx 20rpx;
		height: 100rpx;
		box-sizing: border-box;
		
		textarea {
			font-size: 27rpx;
			width: 100%;
			height: 100%;
		}
	}
	
	.form {
		padding-bottom: 250rpx;
	}
	
	.add {
		padding: 20rpx;
		
		&-btn {
			height: 100rpx;
			border: 1rpx dashed #aaa;
			color: #aaa;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			
			&__icon {
				font-size: 60rpx;
				font-weight: 100;
			}
			
			&__text {
				font-size: 35rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.menu {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9;
		width: 700rpx;
		height: 160rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx 1rpx rgba(0, 0, 0, .2);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		
		&__item {
			width: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			&--icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 80%;
					height: 80%;
				}
			}
			
			&--text {
				text-align: center;
				font-size: 33rpx;
				color: #aaa;
			}
		}
	}
	
	.list {
		height: 100rpx;
		background-color: #fff;
		
		&__item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			
			&--icon {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			&--title{
				padding: 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
			}
			
			&--sort {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	.edit-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 9;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 -3rpx 20rpx 1rpx rgba(0, 0, 0, .1);
	}
	
	.add-pop {
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		
		&__head {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			
			&--icon {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			&--title {
				flex: 1;
				text-align: center;
				font-size: 35rpx;
				font-weight: bold;
				color: #000;
			}
			
			&--right {
				width: 100rpx;
			}
		}
		
		&__content {
			
			&--list {
				display: flex;
				height: 120rpx;
				align-items: center;
				
				&__icon {
					width: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				
				&__right {
					flex: 1;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #eee;
					
					&--title {
						font-size: 32rpx;
						line-height: 40rpx;
					}
					
					&--des {
						font-size: 27rpx;
						color: #aaa;
						line-height: 30rpx;
					}
				}
			}
		}
	}
	
	.manage-pop {
		
		&__content {
			background-color: #fff;
			display: flex;
			padding: 20rpx;
			
			&--list {
				
				&-icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f0f0f0;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&-text {
					text-align: center;
				}
			}
		}
		
		&__cancel {
			height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			background-color: #f5f5f5;
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>
